<!--
 * @Author: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @Date: 2025-05-25 16:46:30
 * @LastEditors: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @LastEditTime: 2025-05-25 19:28:09
 * @FilePath: \iam-ui\src\views\disciplinary\workOrder\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="work">
    <div class="work-top">
      <div class="work-top-item">
        <div class="title">待处理工单</div>
        <div class="num">8个工单</div>
      </div>
      <div class="work-top-item">
        <div class="title">已反馈工单</div>
        <div class="num">50个工单</div>
      </div>
      <div class="work-top-item">
        <div class="title">本年累计工单数</div>
        <div class="num">50个工单</div>
      </div>
    </div>
    <div class="work-table">
      <el-form :model="searchForm" class="search-form" inline>
        <el-form-item label="诉求内容">
          <el-input
            v-model="searchForm.content"
            placeholder="诉求内容"
            clearable
          />
        </el-form-item>
        <el-form-item label="处理类型">
          <el-select v-model="searchForm.type" placeholder="处理类型" clearable>
            <el-option label="全部" value="全部" />
            <el-option label="未处理" value="未处理" />
            <el-option label="不督办" value="不督办" />
            <el-option label="已分配" value="已分配" />
            <el-option label="督办-已回复" value="督办-已回复" />
          </el-select>
        </el-form-item>
        <el-form-item label="督办日期">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="请选择督办日期区间"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" stripe>
        <!-- 序号 -->
        <el-table-column type="index" label="序号" width="80" />
        <!-- 诉求来源 -->
        <el-table-column prop="source" label="诉求来源" show-overflow-tooltip />
        <!-- 工单编号 -->
        <el-table-column prop="code" label="工单编号" show-overflow-tooltip />
        <!-- 处理状态 -->
        <el-table-column prop="status" label="处理状态" show-overflow-tooltip />
        <!-- 督办日期 -->
        <el-table-column prop="date" label="督办日期" show-overflow-tooltip />
        <!-- 诉求性质 -->
        <el-table-column
          prop="property"
          label="诉求性质"
          show-overflow-tooltip
        />
        <!-- 诉求主题 -->
        <el-table-column prop="theme" label="诉求主题" show-overflow-tooltip />
        <!-- 诉求内容 -->
        <el-table-column
          prop="content"
          label="诉求内容"
          show-overflow-tooltip
        />
        <!-- 工单回复 -->
        <el-table-column prop="reply" label="工单回复" show-overflow-tooltip />
        <!-- 操作 -->
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button type="text" @click="handleOptions(row, 'view')"
              >查看</el-button
            >
            <el-button type="text" @click="handleOptions(row, 'reply')"
              >回复</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container">
        <span class="total-count">总共 {{ total }} 个项目</span>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          layout="prev, pager, next, jumper, sizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 抽屉组件 -->
    <asset-drawer
      v-if="drawerVisible"
      v-model:visible="drawerVisible"
      :type="drawerType"
      :asset-data="currentAssetData"
    />
  </div>
</template>

<script setup>
import { onMounted, reactive, defineAsyncComponent } from "vue";
import dayjs from "dayjs";

const AssetDrawer = defineAsyncComponent(() =>
  import("./components/AssetDrawer.vue")
);
// 表格数据
const tableData = ref([]);
const total = ref(0);
// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
// 抽屉控制
const drawerVisible = ref(false);
const drawerType = ref("");
const currentAssetData = ref(null);

const searchForm = reactive({
  content: "",
  type: "全部",
  dateRange: [], // 督办日期区间
});

const handleOptions = (row, type) => {
  if (type !== "delete") {
    drawerVisible.value = true;
    drawerType.value = type;
    currentAssetData.value = row;
  }
};
// 获取表格数据
const fetchTableData = async () => {
  const params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    ...searchForm,
  };
  if (params.dateRange && params.dateRange.length === 2) {
    params.params = {
      beginTime: dayjs(params.dateRange[0]).format("YYYY-MM-DD 00:00:00"),
      endTime: dayjs(params.dateRange[1]).format("YYYY-MM-DD 23:59:59"),
    };
    delete params.dateRange;
  }
  const res = await getList(params);
  tableData.value = res.rows || [];
  total.value = res.total || 0;
};
const handleSearch = () => {
  currentPage.value = 1;
  fetchTableData();
};
// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchTableData();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchTableData();
};

onMounted(() => {
  fetchTableData();
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
